import { useCallback, useState } from 'react'
import items from '../data/data.json'

const MyChild = ({item, onItemClick}) => {
  // console.log(item)
  return <div onClick={onItemClick}>{item.name}</div>
}

let last = null

const MyParent = ({items}) => {
  // const onItemClick = (e) => console.log(
  //   e.target
  // )
  const onItemClick = useCallback((e) => console.log(
    e.target
  ), [])

  console.log(last === onItemClick)
  last = onItemClick

  return <>
    {items.map(item => <MyChild key={item.code} item={item} onItemClick={onItemClick}/>)}
  </>
}

const CallbackDemo = () => {
  const [count, setcount] = useState(0)
  return ( <>
    <h2 onClick={() => setcount(count+1)}>{count}</h2>
    <MyParent items={items}/>
  </> );
}

export default CallbackDemo;